<template>
  <div class="order">
    <!-- 导航面包屑 -->
    <bread :linktitle="link"></bread>
    <!-- 导航面包屑 -->
    <!-- 订单列表 -->
    <div class="order_wrap">
      <div class="search_wrap">
        <el-input
          v-model.trim="keywords"
          placeholder="请输入内容"
          class="search"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click.native="search"
          ></el-button>
        </el-input>
      </div>
      <el-table :data="tableData" border style="width: 100%" height="450">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="300">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column prop="order_pay" label="是否付款"> 
            <template slot-scope="scoped">
                <el-tag v-if="scoped.row.order_pay == 1">已支付</el-tag>
                <el-tag v-else type="danger">未付款</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scopes">
            {{ scopes.row.create_time | getyear }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editaddress"
            ></el-button>
            <el-button icon="el-icon-search" size="mini" @click="openwatch(scope.row.order_id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="page"
      >
      </el-pagination>
      <!--分页器 -->
    </div>
    <!-- 订单列表 -->

    <!-- 修改地址 -->
    <el-dialog title="修改地址" :visible.sync="dialogVisible" width="30%" class="dilog">
      <span>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="地区城市/县:" prop="adress1">
             <el-cascader
    v-model="ruleForm.adress1"
    :options="citydata"
    :props="prop"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址:" prop="adress2">
            <el-input v-model="ruleForm.adress2"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改地址 -->

    <!--物流信息 -->
      <el-dialog title="查看物流" :visible.sync="dialogVisible1" width="30%" class="dilog">
      <span>
         <el-timeline :reverse="true">
    <el-timeline-item
      v-for="(activity, index) in kuaidi"
      :key="index"
      :timestamp="activity.ftime">
      {{activity.context}}
    </el-timeline-item>
  </el-timeline>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 物流信息 -->
  </div>
</template>
<script>
import kuaidi from './kuaidi'
import citydata from './citydara'
import { getyear } from "../../filter/index";
import bread from "../../common/breadcrumb";
export default {
  name: "order",
  data() {
    return {
      link: ["订单管理", "订单列表"],
      queryinfo: {
        query: "",
        pagenum: 1, //当前页
        pagesize: 10, //每页显示条数
      },
      tableData: [],
      total: 0,
      keywords: "",
      dialogVisible: false,
      dialogVisible1:false,
      ruleForm:{
          adress1:"",
          adress2:""
      },
      rules:{
            adress1:[{required: true, message: '请选择城市地区', trigger: 'blur'}],
            adress2:[{required: true, message: '请填写详细地址', trigger: 'blur'}]
      },
      citydata,
      prop:{
          value:'value',
          label:'label',
          children:'children',
          expandTrigger: 'hover'
      },
      kuaidi
    };
  },
  methods: {
    async getorder() {
      let mes = await this.$http.get("orders", { params: this.queryinfo });
      console.log(mes);
      if (mes.meta.status !== 200) return this.$message.error("获取数据失败");
      this.tableData = mes.data.goods;
      this.total = mes.data.total;
    },
    handleSizeChange(val) {
      this.queryinfo.pagesize = val;
      this.getorder();
    },
    handleCurrentChange(val) {
      this.queryinfo.pagenum = val;
      this.getorder();
    },
    search() {
      this.queryinfo.query = this.keywords;
      this.getorder();
    },
    editaddress() {
      this.dialogVisible = true;

    },

    // 打开物流查看的对话框
    openwatch(){
      this.dialogVisible1 = true
    },
    
  },
  components: {
    bread,
  },
  created() {
    this.getorder();
  },
  filters: {
    getyear,
  },
};
</script>
<style scoped>
.order_wrap {
  text-align: left;
  padding: 20px;
  background-color: #fff;
  margin-top: 20px;
}
.search {
  width: 20%;
}
.search_wrap {
  text-align: left;
  margin-bottom: 15px;
}
.page {
  margin-top: 20px;
}
.dilog{
    text-align: left    ;
}
</style>